<template>
  <div class="transportationWrap flex">
    <el-steps :space="200" :active="active" finish-status="success" align-center>
      <el-step title="创建订单" description="2019-09-18 15:08:13"></el-step>
      <el-step title="付款" description="2019-09-18 15:08:13"></el-step>
      <el-step title="发货" description="2019-09-18 15:08:13"></el-step>
      <el-step title="确认收货" description="2019-09-18 15:08:13"></el-step>
    </el-steps>
    <div class="orderInfo">
      <p>
        <span>运单号码：TT6699773897877</span>
        <span>物流公司：天天快递</span>
        <span>客户电话：400-188-8888</span>
      </p>
      <p>发货地址：北京市北京市通州区 潞苑北大街777号仓库10000</p>
      <p>收货地址：南京市江宁区 000000</p>
    </div>
    <div class="infoLists">
      <div class="flex infoList" style v-for="(item,index) in infoList" :key="index">
        <span>{{item.time}} {{item.week}}</span>
        <ul>
          <li v-for="(ite,ind) in item.records" :key="ind">{{ite}}</li>
        </ul>
      </div>
    </div>
    <el-button class="back" @click="$router.go(-1)">返回订单列表</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 4,
      infoList: [
        {
          time: "2019-09-18",
          week: "周三",
          records: [
            "15:29:07商品已经下单",
            "15:29:07您的订单已经开始处理",
            "15:29:07您的订单待配货"
          ]
        },
        {
          time: "2019-09-18",
          week: "周三",
          records: [
            "15:29:07商品已经下单",
            "15:29:07您的订单已经开始处理",
            "15:29:07您的订单待配货"
          ]
        },
        {
          time: "2019-09-18",
          week: "周三",
          records: [
            "15:29:07商品已经下单",
            "15:29:07您的订单已经开始处理",
            "15:29:07您的订单待配货"
          ]
        }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.transportationWrap {
  width: 100%;
  background: #fff;
  padding: 10px 50px;
  margin: 15px 0;
  flex-direction: column;
  align-items: center;
  .el-steps {
    width: 70%;
  }
  .orderInfo {
    width: 100%;
    margin: 20px 0 40px 0;
    p {
      padding: 2px 0;
      span {
        font-weight: bold;
      }
    }
  }
  .infoLists {
    width: 100%;
    .infoList {
      justify-content: flex-start;
      margin-top: 5px;
    }
    span {
      font-size: 16px;
    }
    ul {
      margin-left: 15px;
      li {
        font-size: 16px;
        padding: 2px 0;
        &:hover{
          
        }
      }
    }
  }
  .back {
    background: rgb(7, 131, 241);
    color: #fff;
    width: 30%;
    margin: 25px 0;
  }
}
</style>